<template>
  <div class="dialog">
    <el-dialog :title="title" :visible.sync="isShowDialogComponent"
               width="50%" :before-close="handleClose">
      <div class="required-desc" v-if="judgeId===0">(*此页均为必填项)</div>
      <div class="required-desc" v-else>(*此页基础学科和基础课程只做展示，不支持编辑操作，其余均为必选项)</div>
      <el-form label-width="110px" ref="formRef"
               :model="form" v-loading="loading"
               element-loading-text="拼命加载中......"
               element-loading-spinner="el-icon-loading">
        <div class="subject-curriculum">
          <el-form-item label="选择基础学科">
            <!--    基础学科名称的下拉选择框-->
            <el-select v-model="selectedSubjectId" @change="subjectIdChange"
                       placeholder="请选择基础学科" :disabled="judgeId!==0">
              <el-option v-for="(item,index) in subjectList" :key="index"
                         :label="item.Text" :value="item.Value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="选择基础课程" class="curriculum">
            <el-select v-model="form.CurriculumID"
                       placeholder="请选择基础课程" :disabled="judgeId!==0">
              <el-option v-for="(item,index) in curriculumList" :key="index"
                         :label="item.Text" :value="item.Value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>

        <el-form-item label="选择上课星期">
          <el-select v-model="form.Week"  placeholder="请选择">
            <el-option v-for="(item,index) in options" :key="index"
                       :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择上课时段">
          <el-radio v-model="form.TimeInterval" label="上午" >上午</el-radio>
          <el-radio v-model="form.TimeInterval" label="下午" >下午</el-radio>
          <el-radio v-model="form.TimeInterval" label="晚上" >晚上</el-radio>
        </el-form-item>

        <div class="time-box">
          <el-form-item label="选择具体时间">
            <el-time-select placeholder="上课时间" v-model="startTime"
                            :picker-options="{start: '08:00', step: '00:30', end: '22:00' }">
            </el-time-select>
            <span class="end-time">
                 <el-time-select placeholder="下课时间" v-model="endTime"
                                 :picker-options="{ start: '08:00',step: '00:30',end: '22:00',minTime:startTime}">
                  </el-time-select>
            </span>
          </el-form-item>
        </div>

      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose" :disabled="loading">取 消</el-button>
    <el-button type="primary" @click="submitEvent" :disabled="loading">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import BaseCurriculumDetails from '../../../model/baseCurriculumDetail'
import BaseCurriculum from '../../../model/baseCurriculum'

export default {
  name: 'DetailDialog',
  props: {
    isShowDialogComponent: Boolean,
    title: String,
    judgeId: Number,
  },
  data () {
    return {
      //加载
      loading: false,
      //新增表单
      form: {
        //课程id
        CurriculumID: '',
        //上午、中午、下午
        TimeInterval: '',
        //星期
        Week: '',
        StartTime: '',
        EndTime: ''
      },
      editForm: {
        ID: '',
        Week: '',
        StartTime: '',
        EndTime: '',
        TimeInterval: ''
      },
      //具体时间选择器中的绑定的开始、结束时间
      startTime: '',
      endTime: '',
      //学科信息
      subjectList: [],
      //课程信息
      curriculumList: [],
      //学科的下拉选择器中被选中的id
      selectedSubjectId: '',
      //存储星期的地方----固定数据
      options: [{
        value: '星期一',
        label: '星期一'
      }, {
        value: '星期二',
        label: '星期二'
      }, {
        value: '星期三',
        label: '星期三'
      }, {
        value: '星期四',
        label: '星期四'
      }, {
        value: '星期五',
        label: '星期五'
      }, {
        value: '星期六',
        label: '星期六'
      }, {
        value: '星期日',
        label: '星期日'
      }
      ],
    }
  },
  created () {
    this.getBaseSubjectData()
    this.judgeEditButtonButton()
  },
  methods: {
    handleClose (payload) {
      this.$emit('handleClose', payload)
    },
    //获取基础学科的信息
    async getBaseSubjectData () {
      const res = await BaseCurriculum.getSubjectList()
      this.subjectList = res
    },
    //学科下拉选择器中的选中项发生变化时触发
    subjectIdChange (id) {
      this.selectedSubjectId = id
      this.form.CurriculumID = null
      if (this.selectedSubjectId) {
        this.getBaseCurriculumList()
      }
    },
    //获取基础课程的信息，参数id为选中的某个学科的ID
    async getBaseCurriculumList () {
      const res = await BaseCurriculum.pageSearchList({ ID: this.selectedSubjectId })
      this.curriculumList = res
      if (this.curriculumList.length === 0) {
        this.$message.error({
          message: '该基础学科下暂未添加基础课程，请前往添加',
          offset: 150
        })
      }
    },
    //判断点击的是不是编辑按钮，如果是编辑按钮，进行信息展示
    async judgeEditButtonButton () {
      if (this.judgeId !== 0) {
        try {
          this.loading = true
          const res = await BaseCurriculumDetails.SearchModelDetails({ ID: this.judgeId })
          console.log(res)
          this.loading = false
          this.selectedSubjectId = res.SubjectName
          this.form.CurriculumID = res.ClassName
          this.startTime = res.StartTime
          this.endTime = res.EndTime
          this.form.Week = res.Week
          this.form.TimeInterval = res.TimeInterval
        } catch (err) {
          this.loading = false
        }
      }
    },
    //点击对话框确定
    async submitEvent () {
      //提交表单进行必填项认证
      if (this.selectedSubjectId === '') {
        this.$message.error('请选择基础学科')
      } else if (this.form.CurriculumID === null) {
        this.$message.error('请选择基础课程')
      } else if (this.form.Week === '') {
        this.$message.error('请选择上课星期')
      } else if (this.form.TimeInterval === '') {
        this.$message.error('请选择上课时段')
      } else if (this.startTime === '') {
        this.$message.error('请选择开始上课的时间')
      } else if (this.endTime === '') {
        this.$message.error('请选择结束上课的时间')
      } else {
        //通过验证后，发起网络请求
        //判断点击的时添加还是编辑
        try {
          if (this.judgeId === 0) {
            this.loading = true
            this.form.StartTime = this.startTime
            this.form.EndTime = this.endTime
            await BaseCurriculumDetails.Add(this.form)
            this.loading = false
            this.$message.success('添加基础课程详情成功')
            this.handleClose('submitEvent')
          } else {
            //进行真正的编辑操作
            this.loading = true
            this.editForm.EndTime = this.endTime
            this.editForm.StartTime = this.startTime
            this.editForm.ID = this.judgeId
            this.editForm.Week = this.form.Week
            this.editForm.TimeInterval = this.form.TimeInterval
            await BaseCurriculumDetails.Update(this.editForm)
            this.loading = false
            this.$message.success('成功编辑该条基础课程详情信息')
            this.handleClose('submitEvent')
          }
        } catch (err) {
          this.loading = false
        }

      }
    },
  }

}
</script>

<style scoped>
.subject-curriculum {
  display: flex;
}

.subject-curriculum .curriculum {
  margin-left: 100px;
}

.dialog {
  position: relative;
}

.required-desc {
  position: absolute;
  color: #DC143C;
  font-weight: bold;
  top: 23px;
  left: 160px;
}

.end-time {
  margin-left: 15px;
}


</style>
